<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Vuex Intergation</title>
    <link rel="stylesheet" href="../assets/style.css">
    <script src="../assets/menu.js"></script>

    <!-- first import Vue -->
    <!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
    <script src="../assets/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
    <script src="/liquor-tree.umd.js"></script>

    <style>
      .node-info {
        display: flex;
        width: 100%;
        justify-content: space-between;
      }
    </style>
  </head>
  <body>
    <div class="hello">
      Vuex Intergation.
    </div>

    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">
            Tree Module "A". Synchronizes with the neighbor (-------->)
          </div>
          <div class="example-tree">
            <tree
              v-if="!loading"
              :options="treeOptions1"
              ref="tree"
            >
            </tree>
            <div v-else style="padding: 20px;">Loading...</div>
          </div>
        </div>

        <div class="example">
            <div class="example-description">
              Tree Module "B". Does not synchronize with the neighbor (<-------)
            </div>
            <div class="example-tree">
              <tree
                :options="treeOptions2"
                ref="tree"
              >
              </tree>
            </div>
          </div>
      </div>
    </div>

    <script>
      const moduleA = {
        state: {
          treeModuleA: []
        },
        mutations: {
          updateTreeModuleA(state, newTree) {
            state.treeModuleA = newTree
          }
        },
        actions: {
          updateAllTrees(context, newTree) {
            context.commit('updateTreeModuleA', newTree)
          },
          updateModuleA(context, newTree) {
            context.commit('updateTreeModuleA', newTree)
          }
        },
        getters: {
          mySuperTreeA(state) {
            return state.treeModuleA
          }
        }
      }

      const moduleB = {
        state: {
          treeModuleB: [{text: 123}]
        },
        mutations: {
          updateTreeModuleB(state, newTree) {
            state.treeModuleB = newTree
          }
        },  
        actions: {
          updateAllTrees(context, newTree) {
            context.commit('updateTreeModuleB', newTree)
          },
          updateModuleB(context, newTree) {
            context.commit('updateTreeModuleB', newTree)
          }
        },
        getters: {
          mySuperTreeB(state) {
            return state.treeModuleB
          }
        }
      }

      const Store = new Vuex.Store({
        modules: {
          moduleA, moduleB
        }
      })

      new Vue({
        el: '#app',
        store: Store,
        data: () => ({
          loading: true,

          treeOptions1: {
            dnd: true,
            store: {
              store: Store,
              getter() {
                return Store.getters.mySuperTreeA
              },
              dispatcher(tree) {
                Store.dispatch('updateAllTrees', tree)
              }
            }
          },

          treeOptions2: {
            store: {
              store: Store,
              getter() {
                return Store.getters.mySuperTreeB
              },
              dispatcher(tree) {
                Store.dispatch('updateAllTrees', tree)
              },
              // (!!!!) to increase productivity
              mutations: [
                'updateTreeModuleA'
              ]
            }
          }
        }),

        mounted() {
          setTimeout(_ => {
            fetch('/assets/data/filtering.json').then(r => r.json()).then(data => {
              Store.dispatch('updateModuleA', data)
              this.loading = false
            })
          }, 1000)
        }
      })
    </script>

  </body>
</html>
